<ModalDialog
  {id}
  {label}
  background="var(--muted-modal-bg)"
  muted="true"
  className="shortcut-help-modal-dialog">

  <h1>{intl.hotkeys}</h1>

  <ShortcutHelpInfo inDialog={true} />

  <Shortcut scope='modal-{id}' key='h|?' on:pressed='close()'/>
</ModalDialog>
<style>
  h1 {
    color: var(--muted-modal-text);
  }
</style>
<script>
  import ModalDialog from './ModalDialog.html'
  import ShortcutHelpInfo from '../../ShortcutHelpInfo.html'
  import Shortcut from '../../shortcut/Shortcut.html'
  import { show } from '../helpers/showDialog.js'
  import { close } from '../helpers/closeDialog.js'
  import { oncreate } from '../helpers/onCreateDialog.js'

  export default {
    oncreate,
    components: {
      ModalDialog,
      Shortcut,
      ShortcutHelpInfo
    },
    methods: {
      show,
      close
    }
  }
</script>
